<template>
  <a-modal
    title="修改密码"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="hideModal"
    :maskClosable="false"
    destroyOnClose
    width="720px"
    style="overflow: hidden;"
    :bodyStyle="{ maxHeight: '520px', overflow: 'auto' }"
  >
    <a-spin :spinning="spinning">
      <a-form-model
        :model="formData"
        :rules="rules"
        ref="myForm"
        :style="{ width: '100%' }"
        layout="horizontal"
        v-bind="{
          labelCol: { span: 4 },
          wrapperCol: { span: 20 }
        }"
        :colon="true"
        labelAlign="right"
      >
        <a-row style="height: 100%">
          <a-col :span="24">
            <a-form-model-item label="原密码" prop="oldPass" v-bind="{}">
              <a-input-password v-model="formData.oldPass" placeholder="" size="default" :disabled="false">
              </a-input-password>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="新密码" prop="newPass" v-bind="{}">
              <a-input-password v-model="formData.newPass" placeholder="" size="default" :disabled="false">
              </a-input-password>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="确认密码" prop="checkPass" v-bind="{}">
              <a-input-password v-model="formData.checkPass" placeholder="" size="default" :disabled="false">
              </a-input-password>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import md5 from 'md5'
import { checkPassword, updPassword } from '@/api/sys/user'
export default {
  components: {},
  props: [],
  data () {
    const validatePass = (rule, value, callback) => {
      if (this.$tools.trim(value) === '') {
        callback(new Error('请输入原密码'))
      } else {
        checkPassword({
          p: md5(value)
        }).then(res => {
          if (res.code === 1) {
            callback()
          } else {
            callback(new Error(res.msg || '校验不通过'))
          }
        })
      }
    }
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请确认密码'))
      } else if (value !== this.formData.newPass) {
        callback(new Error('密码输入不一致'))
      } else {
        callback()
      }
    }

    return {
      spinning: true,
      confirmLoading: false,
      visible: false,
      defaultFormData: {
        oldPass: '',
        newPass: '',
        checkPass: ''
      },
      formData: {},
      rules: {
        oldPass: [
          {
            required: true,
            message: '新密码不能为空',
            trigger: 'blur'
          },
          { validator: validatePass, trigger: 'blur' }
        ],
        newPass: [
          {
            required: true,
            message: '新密码不能为空',
            trigger: 'blur'
          },
          {
            max: 18,
            message: '新密码最大长度不能大于18',
            trigger: 'blur'
          },
          {
            min: 6,
            message: '新密码最小长度不能小于6',
            trigger: 'blur'
          },
          {
            pattern: '^(?![a-zA-z]+$)(?!\\d+$)(?![!@#$%^&.*]+$)[a-zA-Z\\d!@#$%^&.*]+$',
            message: '必须包含字母、数字、特殊字符其中两种',
            trigger: 'blur'
          }
        ],
        checkPass: [
          {
            required: true,
            message: '新密码不能为空',
            trigger: 'blur'
          },
          { validator: validatePass2, trigger: 'change' }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    this.spinning = false
    this.spinning = false
    this.spinning = false
  },
  methods: {
    showModal (id) {
      this.formData = Object.assign({}, this.defaultFormData)
      this.visible = true
    },
    hideModal () {
      this.confirmLoading = false
      this.visible = false
    },
    handleOk () {
      this.confirmLoading = true
      this.$refs['myForm'].validate(valid => {
        if (!valid) {
          this.confirmLoading = false
          console.log('error')
        } else {
          // TODO 提交表单
          updPassword({
            o: md5(this.formData.oldPass),
            p: md5(this.formData.newPass)
          }).then(res => {
            this.confirmLoading = false
            if (res.code === 1) {
              this.hideModal()
              this.$message.success('修改成功，即将重新登录。')
              setTimeout(() => {
                this.$router.push({ path: '/user/login' })
              }, 3000)
            } else {
              // this.$message.error(res.msg || '校验不通过')
            }
          })
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
/*复选框样式*/
.ant-checkbox-wrapper + .ant-checkbox-wrapper {
  margin-left: 0px;
}
</style>
